<template>
  <div class="field-partial-time">
    <template v-if="tableField.fieldVariableTypeValue">
      <el-popover placement="bottom" width="300" v-model="visible">
        <div>
          <div class="hour" v-if="['1', '2', '3'].includes(tableField.fieldVariableValue.accuracy)
      ">
            <el-select :size="size" v-model="hourValue" placeholder="时"
              @visible-change="val => handleVisibleChange(val, 'hour')" :disabled="disabled || readOnly" clearable>
              <el-option v-for="item in hourOptions" :key="item.value" :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="minute" v-if="['1', '2'].includes(tableField.fieldVariableValue.accuracy)">
            <el-select :size="size" v-model="minuteValue" placeholder="分"
              @visible-change="val => handleVisibleChange(val, 'minute')" :disabled="disabled || readOnly" clearable>
              <el-option v-for="item in minuteOrSecondOptions" :key="item.value" :label="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="second" v-if="tableField.fieldVariableValue.accuracy == '1'">
            <el-select :size="size" v-model="secondValue" placeholder="秒"
              @visible-change="val => handleVisibleChange(val, 'second')" :disabled="disabled || readOnly" clearable>
              <el-option v-for="item in minuteOrSecondOptions" :key="item.value" :label="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <el-button :size="size" slot="reference">{{ localValue }}</el-button>
      </el-popover>
    </template>

    <template v-else>
      <div class="hour" v-if="['1', '2', '3'].includes(tableField.fieldVariableValue.accuracy)">
        <el-select :size="size" v-model="hourValue" placeholder=""
          @visible-change="val => handleVisibleChange(val, 'hour')" :disabled="disabled || readOnly" clearable>
          <el-option v-for="item in hourOptions" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="minute" v-if="['1', '2'].includes(tableField.fieldVariableValue.accuracy)">
        <el-select :size="size" v-model="minuteValue" placeholder=""
          @visible-change="val => handleVisibleChange(val, 'minute')" :disabled="disabled || readOnly" clearable>
          <el-option v-for="item in minuteOrSecondOptions" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="second" v-if="tableField.fieldVariableValue.accuracy == '1'">
        <el-select :size="size" v-model="secondValue" placeholder=""
          @visible-change="val => handleVisibleChange(val, 'second')" :disabled="disabled || readOnly" clearable>
          <el-option v-for="item in minuteOrSecondOptions" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </template>
  </div>
</template>

<script>
import Mixins from "./mixins";
export default {
  mixins: [Mixins],
  data() {
    function generateData(options, start, end) {
      for (let i = start; i <= end; i++) {
        if (i < 10) {
          options.push({ value: `0${i.toString()}` });
        } else {
          options.push({ value: i.toString() });
        }
      }
    }
    const hourOptions = [{ value: "UK" }],
      minuteOrSecondOptions = [{ value: "UK" }];
    // 生成小时数据
    generateData(hourOptions, 0, 23);
    // 生成分钟、秒数据
    generateData(minuteOrSecondOptions, 0, 59);

    return {
      visible: false,
      hourOptions: hourOptions,
      minuteOrSecondOptions: minuteOrSecondOptions,
      hourValue: "",
      minuteValue: "",
      secondValue: ""
    };
  },
  watch: {
    hourValue: {
      handler: function (val) {
        this.localValue = `${val}:${this.minuteValue}:${this.secondValue}`;
      }
    },
    minuteValue: {
      handler: function (val) {
        this.localValue = `${this.hourValue}:${val}:${this.secondValue}`;
      }
    },
    secondValue: {
      handler: function (val) {
        this.localValue = `${this.hourValue}:${this.minuteValue}:${val}`;
      }
    },
    localValue: {
      handler: function (val) {
        if (val && val.indexOf(":") >= 0) {
          if (val == "::") {
            this.hourValue = "UK";
            this.minuteValue = "UK";
            this.secondValue = "UK";
            this.localValue = "";
          } else {
            const arr = val.split(":");
            this.hourValue = arr[0];
            this.minuteValue = arr[1];
            this.secondValue = arr[2];
          }
        } else {
          this.hourValue = "";
          this.minuteValue = "";
          this.secondValue = "";
          this.localValue = "";
        }
      },
      immediate: true
    }
  },
  methods: {
    handleVisibleChange: function (val, type) {
      if (val) {
        // const now = new Date();
        // this.hourValue = now.getHours();
        // const minute = now.getMinutes();
        // this.minuteValue = minute < 10 ? `0${minute}` : minute;
        // const second = now.getSeconds();
        // this.secondValue = second < 10 ? `0${second}` : second;
      }
    },
    handleClear: function() {
      this.hourValue = "";
      this.minuteValue = "";
      this.secondValue = "";
      this.localValue = "";
    },
  }
};
</script>

<style lang="scss" scoped>
.field-partial-time {
  display: flex;
  .el-button {
    width: 100%;
    min-width: 6.25rem;
    height: 1.75rem;
  }
  .el-icon-brush {
    color: #c0c4cc;
  }
}

/deep/.el-select {
  margin-right: 0.3rem;

  .el-input {
    width: 4rem !important;

    &:first-child {
      width: 5rem !important;
    }
  }
}
</style>